<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的每日任务清单</title>
  <style>
    .completed {
      color: gray;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>我的每日任务清单</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        {{ task.name }}
        <button @click="toggleTask(index)">
          {{ task.completed ? '已完成' : '未完成' }}
        </button>
      </li>
    </ul>
    <p v-if="allCompleted">恭喜你完成了所有任务！</p>
    
    <input v-model="newTask" placeholder="输入新的任务">
    <button @click="addTask">添加任务</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        tasks: [
          { name: '上数学课', completed: false },
          { name: '做作业', completed: false },
          { name: '跑步', completed: false },
          { name: '预习课程', completed: false }
        ],
        newTask: ''
      },
      computed: {
        allCompleted: function() {
          return this.tasks.every(task => task.completed);
        }
      },
      methods: {
        toggleTask: function(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
        },
        addTask: function() {
          if (this.newTask.trim() !== '') {
            this.tasks.push({ name: this.newTask, completed: false });
            this.newTask = '';
          }
        }
      }
    });
  </script>
</body>
</html>